<!--我发布的 - 需求-->
<template>
	<view>
		<view class="c_xuan flex flex-row bl">
			<view 
			v-for="(item,index) in category"
			:key="index"
			@click="tabsChange(item.name)" :class="[tabsTitleKey == item.name ? 'on' : '']" class="c_tablist"><text>{{ item.title }}</text></view>
		</view>
		<view class="c_xuan flex flex-row white">
			<view 
			v-for="(item,index) in statusList"
			:key="index"
			@click="statusChange(item.name)" :class="[statusListKey == item.name ? 'on' : '']" class="c_tablist"><text>{{ item.title }}</text></view>
		</view>


		<navigator :url="'../index/fabuchengguo?id='+item.id+'&apiname='+tabsTitleKey" class="my-10 white px-24 pt-20 pb-34" v-for="(item, index) in list" :key="index">
			<view class="flex flex-row flex-row-center-between border-b-1 pb-16">
				<view class="flex flex-row flex-row-center-start">
					<tm-icon color="#C8C8C8" :line-height="0" :font-size="22" name="tmicon-clock"></tm-icon>
					<text class="text-size-s c_qianhui ml-16">{{ item.created_at }}</text>
				</view>
				<view class="text-size-s" :style="{color:item.examine_data.color}">{{ item.examine_data.text }}</view>
			</view>
			<view class="pt-30 text-size-g text-weight-b text-overflow-1">{{ item.title }}</view>

			<view class="my-20 flex flex-row flex-row-center-start flex-wrap" style="gap:24rpx 32rpx;">
				<view v-for="(item2,index2) in item.tag_arr" :key="index2" class="c_textlist flex flex-center "
				:style="{background:item2.color}"
				><text>{{ item2.text }}</text></view>
			</view>


		    <view class="text-overflow-2 text-size-m c_wenhui">
				{{ item.intro }}
			</view>
			
		</navigator>
		


		<bl-list-layout 
		btn-color="white" 
		@restart-load="resetReq(true); getData()" 
		:status="status"
		:list-len="list.length">
		</bl-list-layout>

	</view>
</template>

<script lang="ts" setup>
import { ref,computed } from "vue"
import { onLoad, onPullDownRefresh, onReachBottom, onShow } from "@dcloudio/uni-app";
import blListLayout from "@/components/bl-list-layout.vue";
import { apiUr, useReqList } from "@/libs/api";
import zhaochengguo from "./components/zhaochengguo.vue";
import { color } from "echarts";

const { status, resetReq, actionHttp, list, setOptions,banner } = useReqList();
const category = [
	{ title: "需求", name: "demand" },
	{ title: "服务", name: "service" },
	{ title: "成果", name: "achieved" },
	{ title: "投资", name: "investment" },
	{ title: "团队", name: "team" },
	{ title: "融资", name: "financing" },
]
const tabsTitleKey = ref("demand")

const statusList = [
	{ title: "全部", name: "" },
	{ title: "待审核", name: 1 },
	{ title: "审核通过", name: 2 },
]
const statusListKey = ref("")

function tabsChange(key: string) {
	if(key==tabsTitleKey.value) return;
	tabsTitleKey.value = key;
	resetReq(true);
	getData()
}

function statusChange(key: string) {
	if(key==statusListKey.value) return;
	statusListKey.value = key;

	resetReq(true);
	getData()
}


onLoad(async (obj:any) => {
	if(obj?.state){
		statusListKey.value = obj?.state
	}
})

onShow(()=>{
	let isRfres = uni.$tm.u.getCookie("refreshFabuList")
	if(isRfres||list.value.length==0){
		uni.$tm.u.delCookie("refreshFabuList")
		resetReq(true);
		getData()
	}
})

onPullDownRefresh(() => {
	if (status.isLoading) {
		uni.stopPullDownRefresh();
		return
	}
	resetReq(true);
	getData()
})
onReachBottom(() => {
	if (status.isLoading || !status.isMore) return;
	getData()
})

function getData() {
	uni.showLoading({ title: "...", mask: true })
	actionHttp(apiUr.wodefuabu(), { type: tabsTitleKey.value,state:statusListKey.value }).then(() => {
		uni.stopPullDownRefresh();
		uni.hideLoading()
	})
}

</script>

<style>
page {
	background: #F7F7F7;
}
</style>
<style lang="less" scoped>
	.c_xuan {
		gap: 12rpx;
		justify-content: space-around;
		height: 64rpx;
		// margin-bottom: 16rpx;
		// padding-bottom: 15rpx;
	
		.c_tablist {
			font-size: 30rpx;
			color: #484848;
			height: 100%;
			padding: 0 24rpx;

			text {
				display: block;
				position: relative;
				height: 100%;
				line-height: 64rpx;
			}
	
			&.on {
				color: #0073FF;
				font-weight: bold;
			}
	
			&.on text::after {
				content: " ";
				display: block;
				position: absolute;
				width: 100%;
				height: 2px;
				border-radius: 2px;
				background-color: #0073FF;
				left: 0;
				bottom: 0;
			}
		}

		&.bl{
			background-color: #0073FF;
			
			.c_tablist{
				text {
					color: white;
					opacity: 0.7;
				}
	
				&.on {
					color: white;
					font-weight: bold;
					text {
						opacity: 1;

					}
				}
				&.on text::after {
					background-color: white;
				}
			}
		}
	}
	.c_textlist{
		border-radius: 6rpx;
		color: #ffffff;
		font-size: 26rpx;
		padding: 8rpx 16rpx;
	}
	
</style>